<template>
    <div class="layout-city-list-wrap">

        <div class="cityButton"
             @click="toCheckCityClick">
            <div class="locationIcon"></div>
            <div>{{checkedCityName}}</div>
            <div :class="isShowCityListPanel?'arrowUpIcon':'arrowDownIcon'"></div>
        </div>
        <city-list-wrap></city-list-wrap>

    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue , Watch} from 'vue-property-decorator';
import CityListWrap from '@/views/common/CityListWrap.vue';

@Component({
    name: 'CityListWithButton',
    components: {
        CityListWrap
    },
})
export default class CityListWithButton extends Vue {
    get checkedCityName() {
        return this.$store.state['cityListModule' as any].checkedCityObj.shortName;
    }
    get isShowCityListPanel(){
        return this.$store.state['cityListModule' as any].isShowCityListWrap;
    }
    private toCheckCityClick(){
        this.$store.dispatch('cityListModule/isShowCityListWrapEmit', true);
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .layout-city-list-wrap{
        position: absolute;
        right:-170px ;
        top:120px;
        z-index: 100;

        .cityButton{
            cursor: pointer;
            font-size: 20px;
            color: #73fbfd;
            padding: 0 15px;
            box-sizing: border-box;
            min-width: 117px;
            height: 38px;
            background-image: url('../../../src/assets/img/zhts/button-bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .locationIcon{
                width: 14px;
                height: 17px;
                margin-right: 10px;
                background-image: url('../../../src/assets/img/zhts/location.png');
            }
            .arrowDownIcon{
                width: 11px;
                height: 8px;
                margin-left: 10px;
                background-image: url('../../../src/assets/img/zhts/arrow-down.png');
            }
            .arrowUpIcon{
                width: 11px;
                height: 8px;
                margin-left: 10px;
                background-image: url('../../../src/assets/img/zhts/arrow-up.png');
            }
        }
    }

</style>
